<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <!-- 事件的完整写法 -->
        <button v-on:click="handleClick()">点我</button>
        <!-- 简写 -->
        <button @click="handleClick()">点我</button>

        <!-- 有无括号都可以 注意：有参数必须有 -->

        <button @click="handleClick">点我</button>
        <button @click="handleClick01(1)">点我1111</button>
        <button @click="handleClick02($event)">点我222</button>
        <button @click="show(1)">show</button>
      
   
    </div>
    
</body>
</html>
<script>
 const vm = new Vue({
        el:'#app',
        data(){
           return {
             number:999
           }
        },
        //定义函数的位置
        methods:{
            //定义执行的函数
            handleClick(){
                alert("你好");
            },
            handleClick01(n){
                alert("你好"+n);
            },
            //event是vue当中当触发事件的元素
            handleClick02(event){
               // alert(event);
               // alert(event.target.innerText);
                //函数中this指的是vm  this.属性可以获得vm身上的属性值   自动理解为获取了data
                //console.log(this.number);

                setInterval(()=>{
                    console.log(this);
                },2000)
               

               // alert("你好");
            },
            //使用箭头函数
            show:(a)=>{
                console.log(this);
            }
        }
    });
    console.log(vm);

</script>

<!-- 
    事件的基本使用：
    1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名  onkeydown  = > @keydown
    2.事件的回调函数需要配置在Vue对象实例的methods对象中，最终都会在vm身上 所以可以直接this.xxx调用
    3.methods中不要直接使用箭头函数，否则this会往外找一层不是vm了  如果是在定义好的函数中使用不影响
    4.@click="demo" 和@click="demo()"效果一致，但是@click="demo($event)"可以传参



 -->
